

<template>
    <div class="pagination-comp">
        <el-config-provider :locale="locale">
            <el-pagination class="el-page-box"
                v-model:current-page="condObj.pageIndex"
                v-model:page-size="condObj.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                small="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </el-config-provider>
    </div>
</template>

<script setup>
    import { ref, reactive, toRefs, onBeforeMount, computed, watch } from 'vue'
    // import zhCn from "element-plus/lib/locale/lang/zh-cn"
    import localeZH from 'element-plus/es/locale/lang/zh-cn'
    import localeEN from 'element-plus/es/locale/lang/en';
    import { isEmpty, langTxt, geneMathHash } from '@/utils/util'
    import { controlStore } from '@/stores/control'

    const emitter = defineEmits(['onSizeChange', 'onCurrentChange']);
    const props = defineProps({
        total: {
            type: Number,
            default: 0
        },
        pageSize: {
            type: Number,
            default: 10
        },
        pageIndex: {
            type: Number,
            default: 1
        }
    });

    const { total, pageSize, pageIndex } = toRefs(props);
    
    const condObj = reactive({
		total: 0,
        pageSize: 10,
        pageIndex: 1
	});

	const controlSto = controlStore();
    const currentPage4 = ref(4);
    const pageSize4 = ref(10);

    const locale = computed(() => {
        return controlSto.language == 1 ? localeEN : localeZH;
	});

    const totalCount = computed(() => {
		// // return langTxt(controlSto.language, '-15');
        // return controlSto.language == 1 ? localeEN : localeZH;
	});

    const handleSizeChange = (val) => {
        emitter('onSizeChange', val);
    }
    const handleCurrentChange = (val) => {
        emitter('onCurrentChange', val);
    }


    // watch(() => total.value, (nv, ov) => {
	// 	if(nv != ov) {
    //         // getCol();
    //         condObj.total = nv || 0;
	// 	}
	// });
    watch(() => pageSize.value, (nv, ov) => {
		if(nv != ov) {
            condObj.pageSize = nv || 10;
		}
	});
    watch(() => pageIndex.value, (nv, ov) => {
		if(nv != ov) {
            condObj.pageIndex = nv || 1;
		}
	});

</script>


<style lang="scss" scoped>
    .pagination-comp {
        height: 26px;
        padding: 24px 0 0;
        // border: 1px solid red;
        .el-page-box {
            float: right;
        }
        :deep() {
            .el-pager {
                .number {
                    border: 1px solid #E1E1E1;
                    margin: 0 4px;
                    &:hover {
                        color: #1677FF;
                    }
                }
                & .is-active {
                    border: 1px solid #1677FF;
                    color: #1677FF;
                }
            }
        }
    }
</style>
<style scoped>
/* .pagination-comp >>> .number {
    border: 1px solid #E1E1E1;
} */
</style>
